//webpack的配置文件

//导入node.js中用于操作路径的模块
const path = require('path')

//导入HTML插件，得到一个构造参数
const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
	template: './src/index.html', //制定源文件路径
	filename: './index.html'
})

//创建clean-webpack-plugi对象，用于每次打包时先清理dist目录
//左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//webpack配置
module.exports = {
	//mode有两种值
	//development ： 开发环境 打包不压缩
	//production  ： 上线环境 打包压缩
	mode: 'development',
	entry: path.join(__dirname,'./src/index.js'),//打包入口文件路径默认./src/index.js
	output:{
		path: path.join(__dirname,'./dist'),//输出文件目录，默认./dist
		filename: 'js/builder.js' //输出文件名 默认main.js
	},
	plugins: [htmlPlugin, new CleanWebpackPlugin()], //挂载HtmlPlugin插件 于plugins节点
	devServer:{
		open:true, //编译后自动打开浏览器
		port:80, //修改端口
		host:'127.0.0.1' //指定运行的主机地址，（也可以是localhost）
	},
	//代码行数映射，为了保证在调试阶段显示的报错行号与源代码文件中一致
	// 在开发调试阶段设置为 eval-source-map(不会产生单独的文件，但是可以显示行和列)，或'source-map'(浏览器中显示源码)
	// 发布时，设置为 nosources-source-map(浏览器中只显示报错行号，不显示源码) 或直接关闭 SourceMap
	//cheap-module-source-map(不会产生列，但是是一个单独的映射文件)
    //cheap-module-eval-source-map(不会生成文件，集成在打包后的文件中，不会产生列)
	// 源码映射 会单独生成一个sourcemap文件，代码出错时，会标识当前报错的列和行(大而全)：
	devtool: 'source-map',
	module:{
		rules:[
			//使用css-loader
			//当webpack发现处理不了的文件，就会查找webpack.config.js中module.rules数组中配置的对应loader加载器
			//test匹配文件类型，use对应要调用的loader（根据数组顺组，倒序执行），
			//当执行后将处理结果转给webpack，webpack将处理后的结果合并到打包结果中
			{ test:/\.css$/,use:['style-loader','css-loader']},
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
			// 处理图片文件的 loader
			// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
			// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
			//limit：配置转为base64文件的大小限制（单位KB），大于这个限制则不会转为base64
			//outputPath：生成文件的路径
			{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
			// 使用 babel-loader 处理高级的 JS 语法
			// 配合babel.config.js使用
			// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
			// 因为第三方包中的 JS 兼容性，不需要程序员关心
			//exclude：排除
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
		]
	},
	resolve: {
	    alias: {
	      // 告诉 webpack，代码中，@ 符号表示 src 这一层目录
	      '@': path.join(__dirname, './src')
	    }
	  }
}

